<template>
	<view class='warp' style="background-color: #FFFFFF;position: fixed;">
		<view class="topword">
			<view class="word1">添加银行卡</view>
			<view class="word2">请绑定持卡人本人的银行卡</view>
		</view>
		<view class="from">
			<uni-list-item title="* 持卡人">
				<template slot="footer">
					<input type="text" v-model="real_name" placeholder="请输入真实姓名" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="* 卡号">
				<template slot="footer">
					<input type="text" v-model="bank_code" placeholder="持卡人本人银行卡号" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="* 开户行地址">
				<template slot="footer">
					<input type="text" v-model="bank_address" placeholder="请输入开户行地址" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="* 所属银行" link>
				<template slot="footer">
					<picker @change="choosebank" :value="index1" :range="array">
						<view class="uni-input">{{bankname}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="* 银行卡类型" link>
				<template slot="footer">
					<picker @change="choosetype" :value="index2" :range="array1">
						<view class="uni-input">{{ type1}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item></uni-list-item>
		</view>

		<button @click="addcart">确认添加</button>
	</view>
</template>

<script>
	import {
		addBank,
		getBankType
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				array: [],
				array1: ['储蓄卡', '信用卡'],
				index1: 0,
				index2: 0,
				real_name: "",
				bank_code: "",
				bank_address: "",
				type_id: "",
				type: "",
				typelist: [],
				bankname: "请选择所属银行",
				type1: "请选择银行卡类型"
			}

		},
		created() {
			this.getBankType()
		},
		methods: {
			choosebank(e) {
				this.value1 = e.detail.value
				this.typelist.forEach(item => {
					if (item.name == this.array[this.value1]) {
						this.type_id = item.id
					}
				})
				this.bankname = this.array[this.value1]
			},
			choosetype(e) {
				this.value2 = e.detail.value
				this.type = Number(this.value2) + 1
				this.type1 = this.array1[this.value2]
			},
			// 获取银行类型
			getBankType() {
				getBankType().then(res => {
					this.typelist = res.data
					res.data.forEach(item => {
						this.array.push(item.name)
					})
				})
				console.log('订单', this.array)
			},
			// 添加银行卡
			addcart() {
				let data = {
					real_name: this.real_name,
					bank_code: this.bank_code,
					bank_address: this.bank_address,
					type_id: this.type_id,
					type: this.type,
				}
				// return console.log('data', data)
				addBank(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if (res.status == 200) {
						uni.navigateTo({
							url: "/pages/users/bankcart/index"
						})
					}
				})
			}
		}


	}
</script>

<style scoped lang='less'>
	.topword {
		width: 100%;
		height: 200rpx;
		margin-top: 200rpx;

		.word1 {
			text-align: center;
			font-size: 40rpx;
		}

		.word2 {
			text-align: center;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.from {
		width: 85%;
		margin-left: 50%;
		transform: translateX(-50%);

		.input {
			font-size: 26rpx;
		}
	}

	/deep/.uni-list-item__content {
		display: inline-block;
		padding-right: 8px;
		color: #3b4144;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		overflow: hidden;
	}

	.from .input.data-v-61bc5241 {
		font-size: 26rpx;
		text-align: right !important;
	}
	.uni-input{
		font-size: 26rpx;
		color: #666666;
	}
</style>
